<template>
  <swiper
    class="banner"
    :autoplay="true"
    :interval="3000"
    :duration="1000"
    :indicator-dots="indicatorDots"
    :disable-touch="disableTouch"
    :indicator-active-color="indicatorActiveColor"
  >
    <swiper-item v-for="(item, index) in value" :key="index">
      <view class="swiper-item" @click="item.href && navTo(item.href)">
        <img class="image" :src="item.cover" />
      </view>
    </swiper-item>
  </swiper>
</template>

<script>
  import * as Utils from '@/utils/index.js';

  const isUniapp = Utils.util.isUniapp();

  export default {
    name: 'banner',

    props: {
      value: {
        type: Array,
        default: () => [],
      },
      indicatorDots: {
        type: Boolean,
        default: true,
      },
      disableTouch: {
        type: Boolean,
        default: false,
      },
      indicatorActiveColor: {
        type: String,
        default: '#000000',
      },
    },

    methods: {
      navTo(url) {
        if (!url) return;
        const re = Utils.regular.urlReg();

        if (re.test(url)) {
          // 外部网址
          console.log('外部网址');
          h5uni.navigateTo({
            url: `/pages/webview/index?url=${url}`,
          });
        } else {
          // 内部网址
          console.log('内部网址');
          // Utils.pageTo.navigateTo(url)
          const link =
            url +
            (url.includes('?') ? '&' : '?') +
            'time=' +
            new Date().getTime();
          isUniapp
            ? Utils.pageTo.h5uniNavTo(link)
            : Utils.pageTo.navigateTo(link);
        }
      },
    },
  };
</script>

<style lang="scss" scoped>
  .banner {
    width: 100%;
    height: 100%;
  }

  .swiper-item {
    width: 100%;
    height: 100%;
    .image {
      width: 100%;
      height: 100%;
    }
  }
</style>
